<template>
    <el-drawer v-model="drawerVisible" title="查看实名认证" direction="rtl" size="60%" :with-header="true">
        <el-form ref="formRef" style="max-width: 600px;" :model="form" label-width="auto" label-position="top">
            <el-form-item label="营业执照">
                <img v-if="rowData.companyUrl" :src="rowData.companyUrl" class="avatar" style="width: 300px;height: 170px;" />
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="rowData.companyName" disabled />
            </el-form-item>
            <el-form-item label="统一社会信用代码">
                <el-input v-model="rowData.companyCode" disabled />
            </el-form-item>
            <el-form-item label="注册地址">
                <el-input v-model="rowData.registeredAddress" disabled />
            </el-form-item>
            <el-form-item label="营业期限">
                <el-radio-group v-model="rowData.isTime" disabled>
                    <el-radio value="1" size="large">期限内有效</el-radio>
                    <el-radio value="2" size="large">永久/无有效期限</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="法人身份证">
                <div style="display: flex;">
                    <img v-if="rowData.cardFrontUrl" :src="rowData.cardFrontUrl" class="avatar" style="width: 300px;height: 170px;" />
                    <img v-if="rowData.cardBackUrl" :src="rowData.cardBackUrl" class="avatar"
                        style="width: 300px;height: 170px;" />
                </div>
            </el-form-item>
            <el-form-item label="法人姓名">
                <el-input v-model="rowData.cardName" disabled />
            </el-form-item>
            <el-form-item label="证件号码">
                <el-input v-model="rowData.cardCode" disabled />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="rowData.phone" disabled />
            </el-form-item>
            <el-form-item label="账号昵称">
                <el-input v-model="rowData.nickName" disabled />
            </el-form-item>
        </el-form>
    </el-drawer>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, reactive, defineProps, defineEmits, watch } from 'vue'
import { apiClient } from '@/utils/request'
import { ElMessage } from "element-plus";
import { saveOldStyle } from 'echarts/types/src/animation/basicTransition.js';

// 定义props接收父组件传递的数据
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    rowData: {
        type: Object,
        default: () => ({})
    }
})
const form = reactive({


});

// const userImg = ref();
const AvatarfaceImg = ref();
const NationalEmblemImg = ref();


// 定义emit用于通知父组件drawer状态变化
const emit = defineEmits(['update:visible'])

// 抽屉可见性状态
const drawerVisible = ref(props.visible)

// 监听父组件传入的visible变化
watch(() => props.visible, (newVal) => {
    drawerVisible.value = newVal
})

// 监听drawerVisible变化并通知父组件
watch(drawerVisible, (newVal) => {
    emit('update:visible', newVal)
})
</script>

<style scoped lang="scss">
.header {

    height: 100px;
    background: #F7F7F7;
    border-radius: 10px;
    padding: 10px;

    .content-flag {
        display: flex;

    }

    .square {
        display: flex;
        flex-direction: column;

        padding-right: 60px;


        .label {
            font-size: 14px;
            color: #999999;
        }

        .num {
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 20px;
            color: #2D7AF7;
        }
    }

    .square:not(:last-child) {
        border-right: 1px solid #EEEEEE;


    }

    .square:not(:first-child) {

        padding-left: 40px;

    }




}

.tab-area {
    margin-bottom: 20px;
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}

.custom-pagination {
    --el-pagination-hover-bg-color: #f5f7fa;
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #606266;
    --el-pagination-button-disabled-bg-color: #f5f7fa;
    --el-pagination-button-disabled-text-color: #c0c4cc;
}

.pagination-pages {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 4px;
    background-color: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover {
    color: #409eff;
}

.pagination-btn.active {
    background-color: #409eff;
    color: #fff;
    border-color: #409eff;
}

.pagination-btn.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.upload-square {
    width: 300px;
    height: 169px;
    background: #F7F7F7;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #D1DEF5;

    .content {
        font-size: 14px;
        color: #999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;

    }

}

.update-img {
    width: 300px;
    height: 29px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
}
</style>